/**
- Copyright (c) 2019 Kagilum SAS.
-
- This file is part of iceScrum.
-
- iceScrum is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as published by
- the Free Software Foundation, either version 3 of the License.
-
- iceScrum is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with iceScrum.  If not, see <http://www.gnu.org/licenses/>.
-
- Authors:
-
- Vincent Barrier (vbarrier@kagilum.com)
- Nicolas Noullet (nnoullet@kagilum.com)
**/

.container-left-top-yellow-rect:before, .container-left-middle-yellow-rect, .container-right-top-yellow-rect, .container-right-bottom-blue-rect, .container-left-bottom-yellow-rect, .container-left-top-blue-rect, .container-left-bottom-blue-rect {
  position: relative;
}

.container-left-top-yellow-rect:before {
  content: " ";
  width: 295.9px;
  height: 295.9px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  background-image: linear-gradient(42deg, #ffe802, #fdcc01);
  position: absolute;
  left: -289px;
  top: -132px;
}

.container-left-middle-yellow-rect:before {
  content: " ";
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  background-image: linear-gradient(51deg, #ffe802, #fdcc01);
  position: absolute;
  top: calc(50% - 100px / 2);
  left: -65px;
}

.container-right-top-yellow-rect:after {
  content: " ";
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  position: absolute;
  background-blend-mode: multiply;
  background-image: linear-gradient(51deg, #ffe802, #fdcc01);
  top: -35px;
  right: -55px;
}

.container-right-top-yellow-rect-bis:before {
  content: " ";
  width: 133px;
  height: 133px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  position: absolute;
  background-blend-mode: multiply;
  background-image: linear-gradient(42deg, #ffe802, #fdcc01);
  top: 227px;
  right: -75px;
}

.container-right-bottom-blue-rect:after {
  content: " ";
  width: 396.8px;
  height: 396.8px;
  transform: rotate(-45deg);
  background-blend-mode: multiply;
  background-image: linear-gradient(151deg, #1180e7, #d1e6f0);
  mix-blend-mode: multiply;
  position: absolute;
  bottom: -105px;
  right: -387px;
  z-index: 1;
}

.container-right-bottom-blue-rect-bis:after {
  content: " ";
  width: 77px;
  height: 77px;
  transform: rotate(-45deg);
  background-image: linear-gradient(162deg, #2611e7, #6db4d7);
  box-shadow: 0 2px 94px 0 rgba(77, 128, 221, 1);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  position: absolute;
  TOP: 353px;
  right: -52px;
  z-index: 1;
}

.container-left-top-blue-rect:before {
  content: " ";
  width: 77px;
  height: 77px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  position: absolute;
  top: 83px;
  left: -35px;
  background-image: linear-gradient(151deg, #2611e7, #6db4d7);
  box-shadow: 0 2px 94px 0 rgba(77, 128, 221, 1);
}

.container-left-bottom-blue-rect:after {
  content: " ";
  width: 163px;
  height: 163px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  position: absolute;
  top: 28px;
  left: -153px;
  background-image: linear-gradient(20deg, #2611e7, #6db4d7);
  box-shadow: 0 2px 94px 0 rgba(77, 128, 221, 1);
}

.container-left-bottom-yellow-rect:after {
  content: " ";
  width: 133px;
  height: 133px;
  transform: rotate(-45deg);
  background-blend-mode: multiply;
  background-image: linear-gradient(51deg, #ffe802, #fdcc01);
  mix-blend-mode: multiply;
  position: absolute;
  bottom: -165px;
  left: -68px;
  z-index: 1;
}

.not-logged-in.container-left-top-yellow-rect:before {
  left: -85px;
  top: auto;
  bottom: 143px;
  width: 221.4px;
  height: 221.4px;
}

.not-logged-in.container-left-bottom-blue-rect:after {
  top: auto;
  left: -51px;
  bottom: -17px;
}

.content .rect_1, .content .rect_1_left {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  background-image: linear-gradient(135deg, #1180e7, #d1e6f0);
}

.content .rect_2, .content .rect_2_left {
  position: absolute;
  width: 225px;
  height: 225px;
  transform: rotate(-45deg);
  mix-blend-mode: multiply;
  background-image: linear-gradient(60deg, #ffe802, #fdcc01);
}

.content .rect_3, .content .rect_3_left {
  position: absolute;
  width: 1100px;
  height: 1100px;
  transform: rotate(-45deg);
  background-image: linear-gradient(60deg, #2611E7, #67A4D9);
  box-shadow: 0 2px 9px 0 rgba(77, 128, 221, 1);
}

.content .rect_container {
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

@media (max-width: 991.98px) {

  .content .rect_1 {
    top: 123px;
    right: -152px;
  }

  .content .rect_2 {
    top: 203px;
    right: -205px;
  }

  .not-logged-in .content .rect_2 {
    top: -5px;
    right: 15px;
    height: 82px;
    width: 82px;
  }

  .not-logged-in .content .rect_3 {
    height: 80px;
    width: 80px;
    top: -55px;
    right: 5px;
    mix-blend-mode: unset;
  }

  .not-logged-in .content .rect_1 {
    top: -205px;
    right: 0;
  }

  .content .rect_3 {
    top: -455px;
    right: -1187px;
    mix-blend-mode: multiply;
    background-image: linear-gradient(161deg, #2611e7, #6db4d7);
    box-shadow: 0 1px 45px 0 rgba(77, 128, 221, 1);
  }

  .content .rect_container {
    height: 100px;
  }

  .not-logged-in .rect_4 {
    top: 123px;
    right: -152px;
  }

  .not-logged-in .rect_5 {
    top: 203px;
    right: -205px;
  }

  .not-logged-in.container-left-bottom-blue-rect:after {
    top: auto;
    left: -80px;
    bottom: -155px;
  }

  .not-logged-in.container-left-top-yellow-rect:before {
    left: -190px;
    top: auto;
    bottom: -20px;
    width: 221.4px;
    height: 221.4px;
  }

  .content .rect_1_left {
    top: 123px;
    left: -152px;
  }

  .content .rect_2_left {
    top: 203px;
    left: -205px;
  }

  .content .rect_3_left {
    top: -455px;
    left: -1187px;
    mix-blend-mode: multiply;
    background-image: linear-gradient(161deg, #2611e7, #6db4d7);
    box-shadow: 0 1px 45px 0 rgba(77, 128, 221, 1);
  }
}

@media (min-width: 992px) {
  .not-logged-in.container-left-top-yellow-rect:before {
    left: -85px;
    top: auto;
    bottom: 143px;
    width: 221.4px;
    height: 221.4px;
  }

  .content .rect_1 {
    top: 40px;
    right: 82px;
  }

  .content .rect_2 {
    top: 187px;
    right: -37px;
  }

  .content .rect_3 {
    top: -1036px;
    right: -502px;
  }

  .content .rect_4 {
    top: 187px;
    right: -37px;
  }

  .content .rect_5 {
    top: -1036px;
    right: -502px;
  }

  .content .rect_1_left {
    top: 40px;
    left: 100px;
  }

  .content .rect_2_left {
    top: 187px;
    left: 0;
  }

  .content .rect_3_left {
    top: -1036px;
    left: -420px;
  }

  .content .rect_container {
    height: 465px;
  }

  .container-left-top-yellow-rect:before {
    left: -145px;
    top: -12px;
  }

  .container-left-middle-yellow-rect:before {
    width: 394px;
    height: 394px;
    top: calc(50% - 394px / 2);
    left: -310px;
  }

  .container-right-top-yellow-rect:after {
    width: 280.5px;
    height: 280.5px;
    top: -77px;
    right: -111px;
  }

  .container-right-bottom-blue-rect:after {
    bottom: -1px;
    right: -180px;
  }

  .container-left-top-blue-rect:before {
    top: -53px;
    left: -59px;
    width: 170.8px;
    height: 170.8px;
  }

  .container-left-bottom-yellow-rect:after {
    width: 295.9px;
    height: 295.9px;
    bottom: -50px;
    left: -128px;
  }

  .container-left-bottom-blue-rect:after {
    background-image: linear-gradient(151deg, #2611e7, #6db4d7);
    top: 268px;
    left: -69px;
  }

  .container-right-top-yellow-rect-bis:before {
    content: " ";
    width: 237px;
    height: 237px;
    background-image: linear-gradient(48deg, #ffe802, #fdcc01);
    top: 177px;
    right: -131px;
  }

  .container-right-bottom-blue-rect-bis:after {
    width: 136.5px;
    height: 136.5px;
    background-image: linear-gradient(135deg, #2611e7, #6db4d7);
    box-shadow: 0 2px 75px 0 rgba(77, 128, 221, 1);
    top: 401px;
    right: -86px;
  }
}